<template>
    <div>
        <el-dialog :title="typeSave.zh" :visible.sync="isShow" >
            <form-components :formLabel="formLabelSave" :form="operateForm" ref="form" :config="formConfig"></form-components>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-button :icon="elIconSFoldUnfoldIconStateComputed" class="elIconSFoldUnfold" @click="collapseMenuMethods"></el-button>
            <el-submenu index="0" class="adminAdminName">
                <template slot="title">{{ adminAdminName }}</template>
                <el-menu-item index="5-1" @click="passwordEdit">修改密码</el-menu-item>
                <el-menu-item index="5-2" @click="loginOut">退出</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
    import FormComponents from "./FormComponents";

    export default {
        components: {FormComponents},
        computed: {
            elIconSFoldUnfoldIconStateComputed() {
                return this.$store.state.aside.elIconSFoldUnfoldIconState;
            },
        },
        data() {
            return {
                adminAdminName: '',
                isShow: false,
                typeSave: {},
                formLabelSave: [],
                operateForm: {},
                formConfig: {loading: false},
            }
        },
        created(){
            this.adminAdminNameMethods();
        },
        methods: {
            adminAdminNameMethods() {
                this.adminAdminName = this.$localStorage.get('adminName');
            },
            collapseMenuMethods() {
                this.$store.commit('collapseMenuMutations');
            },
            loginOut() {
                this.$http.post('loginOut').then(
                    response => {
                        if (response.code === 20000) {
                            this.$message({
                                message: response.message,
                                type: 'success'
                            });

                            this.$localStorage.del('accessLogin');
                            this.$router.push({ name: 'Login' });
                        }
                    }
                );
            },
            passwordEdit() {
                this.typeSave = {'en': 'passwordEdit', 'zh': '修改密码'};

                this.formLabelSave = [
                    {model: 'password', label: '密码'},
                    {model: 'password2', label: '确认密码'}
                ];

                this.operateForm = {password: '', password2: ''}
                this.isShow = true;
            },
            confirm() {
                this.formConfig.loading = true;

                let url = {
                    passwordEdit: 'passwordEditSave'
                }

                this.$http.post(url[this.typeSave.en], this.operateForm).then(
                    response => {
                        if (response.code === 20000) {
                            this.$message({
                                message: response.message,
                                type: 'success'
                            });

                            this.isShow = false;
                        }
                        this.formConfig.loading = false;
                    }
                );
            },
            cancel() {
                this.isShow = false;
            },
        },
        inject: ['reload']
    }
</script>

<style scoped lang="scss">
    .adminAdminName{
       float: right;
    }

    .elIconSFoldUnfold{
        border-color: transparent;
        color: rgb(255, 255, 255);
        background-color: rgb(84, 92, 100);
        float: left;
        height: 60px;
        line-height: 60px;
        margin: 0;
        padding: 0 20px;
    }
</style>